import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, StatusBar, Image,Platform,Alert} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import {size} from '@/app/utils';

// 设置一个默认的状态栏高度，避免初始渲染时的延迟
const DEFAULT_STATUS_BAR_HEIGHT = Platform.OS === 'android' ? 24 : 0;

let Headerpro: React.FC<any> = (props: any) => {
    let insets = useSafeAreaInsets();
    // 使用state来存储状态栏高度，初始值使用默认值
    const [statusBarHeight, setStatusBarHeight] = useState<number>(DEFAULT_STATUS_BAR_HEIGHT);
    function goBack() {
        if (props.closeIcon) {
            /////处理如果是web-view中打开二级以及多级页面点击返回事返回web-view的上一页而不是直接关闭web-view
            props.onClickleftBtn();
        } else {
            // 使用expo-router的router.back()替代navigation.goBack()
            router.back();
        }
    }

    function onClose() {
        // 使用expo-router的router.back()替代navigation.goBack()
        router.back();
    }

    function onClickRightBtn() {
        console.log('点击了');
        props.onClickRightBtn && props.onClickRightBtn();
    }

    useEffect(() => {
        // 立即设置StatusBar，不等待组件完全渲染
        StatusBar.setBarStyle(props.barStyle == 0 ? 'dark-content' : 'light-content');
        StatusBar.setBackgroundColor(props.backgroundColor || '#f9f9f9');
        StatusBar.setTranslucent(true);
        StatusBar.setHidden(props.hidden ? props.hidden : false);
        
        // 更新状态栏高度，确保获取到正确的值
        const androidStatusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight || DEFAULT_STATUS_BAR_HEIGHT : insets.top;
        setStatusBarHeight(androidStatusBarHeight);
        
        // 计算并传递导航栏高度
        props.getNavBarHeight && props.getNavBarHeight(size(androidStatusBarHeight) + size(46));
    }, [props, insets.top])

    return (
        <>
            {/* StatusBar组件已在useEffect中通过API设置，这里不再需要 */}
            {/* 使用state中的statusBarHeight，避免直接依赖StatusBar.currentHeight */}
            <View style={{ backgroundColor: props.backgroundColor || '#f9f9f9', paddingTop: size(statusBarHeight), position: props.setTranslucent ? 'absolute' : 'static', top: 0, zIndex: 99999, left: 0, right: 0, elevation: 99999 }}>
                {props.navBarContent ? <View style={[styles.headerBox, props.border ? styles.headerBoxBorder : null]}>{props.navBarContent}</View> : <View style={[styles.headerBox, props.border ? styles.headerBoxBorder : null]}>
                    <View style={styles.headerBoxLeft}>
                        {props.leftContent}
                    {props.leftIcon?<TouchableOpacity onPress={()=>{goBack()}}><Image source={props.leftIcon||require('@/assets/images/icon/back.png')} style={{width:size(18),height:size(18)}}/></TouchableOpacity>:null}
                    {props.closeIcon?<TouchableOpacity onPress={()=>{onClose()}}><Image source={require('@/assets/images/icon/close.png')} style={{width:size(18),height:size(18),marginLeft:size(10)}}/></TouchableOpacity>:null}
                    </View>
                    <View style={styles.headerBoxCenter}>
                        {props.centerContent}
                    {props.title?<Text style={[styles.headerBoxCenterText,{color:props.centerColor||'#444'}]} numberOfLines={1}>{props.title||'帮办管家'}</Text>:null}
                    </View>
                <TouchableOpacity style={styles.headerBoxRight} onPress={()=>{
                        onClickRightBtn();
                    }}>
                        {props.rightContent}
                    {props.rightTitle?<Text style={[styles.headerBoxRightText,{color:props.rightColor||'#444'}]} numberOfLines={1}>{props.rightTitle}</Text>:null}
                    {props.rightIcon?<Image source={props.rightIcon||require('@/assets/images/icon/menu.png')} style={{width:size(18),height:size(18)}}/>:null}
                    </TouchableOpacity>
                </View>}
            </View>
        </>
    );
}

const styles = StyleSheet.create({
    headerBox: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: size(20),
        paddingRight: size(20),
        position: 'relative',
        zIndex: 99999,
        elevation: 99999,
        height: size(46),
    },
    headerBoxBorder: {
        borderStyle: 'solid',
        borderBottomWidth: 1,
        borderBottomColor: '#eee'
    },
    headerBoxCenter: {
        width: size(220),
        textAlign: 'center',
    },
    headerBoxLeft: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        height: size(30)
    },
    headerBoxRight: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end'
    },
    headerBoxLeftText: {
        textAlign: 'left',
        color: '#666',
    },
    headerBoxRightText: {
        textAlign: 'right',
        color: '#666'
    },
    headerBoxCenterText: {
        textAlign: 'center',
        fontWeight: '600',
        fontSize: size(16)
    }
})

export default Headerpro;